<html>
  <head>
    <style></style>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>
      html,body { margin: 0; padding: 0; }
      .box canvas {
        border-right: 1px solid #aaaaaa40;
        border-bottom: 1px solid #aaaaaa40;
        background-image:
        linear-gradient(#aaaaaa40 1px, transparent 0),
        linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
        linear-gradient(#aaa 1px, transparent 0),
        linear-gradient(90deg, #aaa 1px, transparent 0);
        background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
      }
      .list {
        width: 910px;
        overflow: hidden;
        border-top: 1px solid #f0f0f0;
        border-left: 1px solid #f0f0f0;
      }
      .box {
        width: 300;
        min-height: 220;
        float: left;
        border-right: 1px solid #f0f0f0;
        border-bottom: 1px solid #f0f0f0;
        padding: 10px 0;
      }
      .box .title {
        text-align: center;
        font-size: 14px;
        color: #000;
        display: inline-block;
        height: 20px;
        line-height: 20px;
        width: 100%;
        font-family: monospace;
      }
    </style>
  </head>
  <body>

    <div class="list">
      <div class="box" id="mount-1">
        <div class="title">basic</div>
      </div>
      <div class="box" id="mount-2">
        <div class="title">resetSize</div>
      </div>
    </div>

    <script src="../../../packages/board/dist/index.global.js"></script>

    <script>
      function drawBoard(board) {
        const ctx = board.getContext();
        // ctx.setFillStyle('#ffffff');
        // ctx.fillRect(0, 0, 300, 200);

        ctx.setFillStyle('#f0f0f0');
        ctx.fillRect(5, 5, 100, 60);

        ctx.setFillStyle('#cccccc');
        ctx.fillRect(40, 40, 100, 60);

        ctx.setFillStyle('#c0c0c0');
        ctx.fillRect(80, 80, 100, 60);

        ctx.setFillStyle('#e0e0e0');
        ctx.fillRect(200 - 5, 150 - 5, 100, 50);

        ctx.setFillStyle('#000');
        ctx.fillRect(150 - 5, 100 - 5, 10, 10);
      }
    </script>

    <script>
    (function () {
      const { Board } = window.iDrawBoard; 
      const mount = document.querySelector('#mount-1');
      const board = new Board(mount, {
        width: 300,
        height: 200,
        contextWidth: 300,
        contextHeight: 200,
        devicePixelRatio: 4
      });
      drawBoard(board);
      board.scale(0.5);
      board.scale(1);
      board.draw();
    })();
    </script>

    <script>
      (function() {
        const { Board } = window.iDrawBoard; 
        const mount = document.querySelector('#mount-2');
        const opts = {
          width: 300,
          height: 200,
          contextWidth: 300,
          contextHeight: 200,
          devicePixelRatio: 4,
          canScroll: true,
        }
        const board = new Board(mount, opts); 
        drawBoard(board);
        board.draw();
       
        board.resetSize({
          width: 270,
          height: 180,
          contextWidth: 400,
          contextHeight: 320,
          devicePixelRatio: 4,
        });
        drawBoard(board);
        board.draw();

        // board.scale(0.5)
        // board.draw();
      })()
    </script>

   

  </body>
</html>